<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Admin</title>
	<link rel="stylesheet" href="/static/dependency/js/bootstrap-3.3.7/css/bootstrap.css">
	<link rel="shortcut icon" type="image/x-icon" href="/static/dependency/pic/logo.ico"/>
	<script src="/static/dependency/js/jquery-3.2.1.min.js"></script>
	<script src="/static/dependency/js/bootstrap-3.3.7/js/bootstrap.js"></script>
	<style>
		body{
			background-color: #e8edf3;
		}
		#username_scope, #passwd_scope, #passwd_scope_confirm{
			width: 100%;
		}
		#delete_user, #enable_user, #disable_user{
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="page-header">
				<h1>
					Sora Web Terminal v0.1 Admin控制台
				</h1>
				<h5>
					Copyright © 2017 Hochikong. All rights reserved.
				</h5>
			</div>
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span>
						<span class="icon-bar"></span></button> <a class="navbar-brand">当前用户登录：Admin</a>
					    <!--显示用户登录信息-->
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a id="logout">注销</a>
						</li>
					</ul>
				</div>

			</nav>

			<div class="row clearfix">
				<div class="col-md-4 column">
					<h2>添加新用户</h2>
					<hr style="height:5px;border:none;border-top:1px solid #677077;" />
				    <p>用户名:</p>
				    <input type="text" name="username" id="username_scope">
				    <br/>
				    <br/>
				    <p>密码:</p>
				    <input type="password" name="password" id="passwd_scope">
				    <br/>
				    <br/>
				    <p>请再次输入密码:</p>
				    <input type="password" name="password" id="passwd_scope_confirm">
				    <br/>
				    <br/>
				    <button type="button" class="btn btn-primary btn-default" id="create">创建</button>
					<br/>
					<br/>
					<hr style="height:5px;border:none;border-top:1px solid #677077;" />
					<br/>
					<br/>
					<br/>
				    </div>
				<div class="col-md-8 column">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								用户信息
							</h3>
						</div>
						<div class="panel-body">
							<table class="table table-bordered table-hover table-condensed">
						<thead>
							<tr>
								<th>
									用户名
								</th>
								<th>
									状态
								</th>
								<th>
									选择
								</th>
							</tr>
						</thead>
						<tbody id="tablebody">
							<!--插入表格本体-->
						</tbody>
					</table>
						</div>
						<div class="panel-footer">
							&nbsp<button type="button" class="btn btn-danger btn-default" id="delete_user">删除</button>&nbsp
							&nbsp<button type="button" class="btn btn-default" id="disable_user">禁用</button>&nbsp
							&nbsp<button type="button" class="btn btn-default" id="enable_user">启用</button>&nbsp
							&nbsp<button type="button" class="btn btn-default" id="select_alluser">全选</button>&nbsp&nbsp
							<button id="modal-841690" href="#modal-container-841690" data-toggle="modal" type="button" class="btn btn-primary btn-default">修改密码</button>&nbsp

							<div class="modal fade" id="modal-container-841690" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <!--触发遮罩窗体-->
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel">
												修改用户密码
											</h4>
										</div>
										<div class="modal-body">
											<!-- 内置表单 -->
											<form class="form-horizontal">
												<fieldset>
													<div class="control-group">
														<!-- account -->
														<label class="control-label">账户</label>
														<div class="controls">
															<input type="text" placeholder="合法账户名" class="input-xlarge" id="account">
														</div>
													</div>

													<div class="control-group">
														<!-- new passwd -->
														<label class="control-label">新密码</label>
														<div class="controls">
															<input type="password" placeholder="新密码" class="input-xlarge" id="resetpasswd">
														</div>
													</div>

													<div class="control-group">
														<!-- confirm -->
														<label class="control-label">再次输入</label>
														<div class="controls">
															<input type="password" placeholder="重复一次" class="input-xlarge" id="resetpasswdconfirm">
														</div>
													</div>

													<div class="control-group">
														<!-- generate -->
														<label class="control-label">随机密码?</label>
														<div class="controls">
															<input type="text" placeholder="可用" class="input-xlarge" id="randompasswd">
														</div>
													</div>
												</fieldset>
											</form>

										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" id="cancel_reset" data-dismiss="modal">取消</button>
											<button type="button" class="btn btn-primary" id="reset" data-dismiss="modal">提交</button>
											<!--这个提交会直接与flask交互-->
											<button type="button" class="btn btn-success" id="gen_randompasswd">生成随机密码</button>
										</div>
									</div>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="row clearfix">
				<div class="col-md-4 column">
					<div class="panel panel-info">
						<div class="panel-heading">
							<h3 class="panel-title">
								Panel title
							</h3>
						</div>
						<div class="panel-body">
							Panel content
						</div>
						<div class="panel-footer">
							Panel footer
						</div>
					</div>
				</div>
				<div class="col-md-4 column">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								Panel title
							</h3>
						</div>
						<div class="panel-body">
							Panel content
						</div>
						<div class="panel-footer">
							Panel footer
						</div>
					</div>
				</div>
				<div class="col-md-4 column">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								Panel title
							</h3>
						</div>
						<div class="panel-body">
							Panel content
						</div>
						<div class="panel-footer">
							Panel footer
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	//注销用户
	jQuery(document).ready(function () {
		jQuery("#logout").click(function(){
		    alert("退出中...");
		    jQuery.ajax({
		        type: 'POST',
			    url: '/logout',
			    data: JSON.stringify({"msg":"logout"}),
                contentType: 'application/json; charset=UTF-8',
                dataType: 'json',
                success:function () {
		            window.location.href="/"
                }
            })
        })
	})
</script>
<script>
	//读取全部注册用户并展示在列表上
	function AppendToListBody(element) {
		jQuery("#tablebody").append(element);
    }
	jQuery(document).ready(function () {
		jQuery.get('/alluser', function (response) {
		    if(response.status == 'ok'){
		        response.result.forEach(AppendToListBody);
		    }
        })
    })

	//对用户进行修改
	//--------------
	//删除
	jQuery(document).ready(function(){
		jQuery("#delete_user").click(function () {
		    var users = [];
		    jQuery(":checked").each(function () {
		        users.push($(this).val());
		    });
		    console.log(users);
		    jQuery.ajax({
		        type: 'POST',
			    url: '/manipulate',
			    data: JSON.stringify({"ops":"delete","users":users}),
                contentType: 'application/json; charset=UTF-8',
                dataType: 'json',
                success:function (response) {
		            if(response.status == 'ok'){
		                window.location.reload();
		            }
		            if(response.status == 'error'){
		                alert('错误!维护失败');
		            }
                }
            })
        })
    })
	//--------------
	//启用
	jQuery(document).ready(function () {
		jQuery("#enable_user").click(function () {
		    var users = [];
			jQuery(":checked").each(function () {
		        users.push($(this).val());
		    });
		    jQuery.ajax({
		        type: 'POST',
			    url: '/manipulate',
			    data: JSON.stringify({"ops":"enable","users":users}),
                contentType: 'application/json; charset=UTF-8',
                dataType: 'json',
                success:function (response) {
		            if(response.status == 'ok'){
		                window.location.reload();
		            }
		            if(response.status == 'error'){
		                alert('错误!维护失败');
		            }
                }
            })
		})
    })
	//---------------
	//禁用
	jQuery(document).ready(function () {
		jQuery("#disable_user").click(function () {
		    var users = [];
			jQuery(":checked").each(function () {
		        users.push($(this).val());
		    });
		    jQuery.ajax({
		        type: 'POST',
			    url: '/manipulate',
			    data: JSON.stringify({"ops":"disable","users":users}),
                contentType: 'application/json; charset=UTF-8',
                dataType: 'json',
                success:function (response) {
		            if(response.status == 'ok'){
		                window.location.reload();
		            }
		            if(response.status == 'error'){
		                alert('错误!维护失败');
		            }
                }
            })
		})
    })
	//----------------
	//全选
	jQuery(document).ready(function () {
		jQuery("#select_alluser").click(function () {
			jQuery("input[type=checkbox]").attr("checked","true");
        })
    })
	//----------------
	//密码修改

	//不提交:
	jQuery(document).ready(function () {
		jQuery("#cancel_reset").click(function () {
			jQuery("#account").val("");
			jQuery("#resetpasswd").val("");
			jQuery("#resetpasswdconfirm").val("");
			jQuery("#randompasswd").val("");
        })
    })
	//提交:
	jQuery(document).ready(function () {
	    jQuery("#reset").click(function () {
		    var account = jQuery("#account").val();
		    var passwd = jQuery("#resetpasswd").val();
		    var passwdconfirm = jQuery("#resetpasswdconfirm").val();
		    if(account.length>0 && passwd.length>0 && passwdconfirm.length>0){
		        if(passwd.length > 0 && passwd == passwdconfirm){
		            jQuery.ajax({
		                type: 'POST',
			            url: '/manipulate',
			            data: JSON.stringify({"ops":'reset',"username":account,"passwd":passwd}),
                        contentType: 'application/json; charset=UTF-8',
                        dataType: 'json',
                        success:function (response) {
		                    if(response.status == 'ok'){
		                        jQuery("#account").val("");
		                        jQuery("#resetpasswd").val("");
			                    jQuery("#resetpasswdconfirm").val("");
			                    jQuery("#randompasswd").val("");
		                        alert("账户: "+account+" 新密码为: "+passwd+" ,请妥善保存");
		                    }
		                    if(response.status == 'error'){
		                        jQuery("#account").val("");
		                        jQuery("#resetpasswd").val("");
			                    jQuery("#resetpasswdconfirm").val("");
			                    jQuery("#randompasswd").val("");
		                        alert(response.msg);
		                    }
		                }
		            })
		        }
		        else{
		            alert("错误！两次输入的密码不正确");
		            jQuery("#resetpasswd").val("");
			        jQuery("#resetpasswdconfirm").val("");
			        jQuery("#randompasswd").val("");
		        }
		    }
		    else{
		        alert("信息不全，请输入完整");
		        jQuery("#account").val("");
			    jQuery("#resetpasswd").val("");
			    jQuery("#resetpasswdconfirm").val("");
			    jQuery("#randompasswd").val("");
		    }
        })
    })
	//随机字符传生成
	function randomString(len) {
	    len = len || 32;
	    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
	    var maxPos = $chars.length;
	    var pwd = '';
	    for (i = 0; i < len; i++) {
	        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
	    }
	    return pwd;
	}
	jQuery(document).ready(function () {
		jQuery("#gen_randompasswd").click(function () {
		    jQuery("#randompasswd").val(randomString(8));
        })
    })
</script>
<script>
	//创建用户并刷新页面
	jQuery(document).ready(function () {
		jQuery("#create").click(function () {
			var username = jQuery("#username_scope").val();
			var passwd = jQuery("#passwd_scope").val();
			var passwdconfirm = jQuery("#passwd_scope_confirm").val();
			if(passwd.length > 0 && passwd == passwdconfirm){
			    var register_data = {"username":username,"passwd":passwd};
			    jQuery.ajax({
                type: 'POST', url: '/register',
                data: JSON.stringify(register_data),
                contentType: 'application/json; charset=UTF-8',
                dataType: 'json',
                success: function (response) {
                    if(response.status == 'ok'){
                        alert('用户创建成功')
	                    jQuery("#username_scope").val("");
                        jQuery("#passwd_scope").val("").focus();
	                    jQuery("#passwd_scope_confirm").val("");
	                    window.location.reload();
                    }
                    else{
                        alert(response.msg);
                        jQuery("#username_scope").val("").focus();
                        jQuery("#passwd_scope").val("");
	                    jQuery("#passwd_scope_confirm").val("");
                    }
                }
            })
			}
			else{
			    alert('错误！两次输入的密码不正确');
			    jQuery("#passwd_scope").val("").focus();
				jQuery("#passwd_scope_confirm").val("");
			}
        })
    })
</script>
</body>
</html>